<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="topbar safe-area-top">
			<text class="title elderly-text-large">运动指导</text>
			<view class="filter-btn elderly-pressable" @tap="handleFilter">
				<text class="filter-icon">🔍</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh"
		>
			<!-- 今日推荐 -->
			<view class="today-recommendation fade-in">
				<text class="recommendation-title elderly-text-large">今日推荐</text>
				<view class="recommendation-card interactive" @tap="playVideo(exercisePrograms[0])">
					<view class="video-thumbnail">
						<image class="thumbnail-image" :src="exercisePrograms[0].thumbnail" />
						<view class="play-button">
							<text class="play-icon">▶️</text>
						</view>
						<view class="duration-badge">
							<text class="duration-text elderly-text">{{exercisePrograms[0].duration}}</text>
						</view>
					</view>
					<view class="video-info">
						<text class="video-title elderly-text-large">{{exercisePrograms[0].title}}</text>
						<text class="video-desc elderly-text">{{exercisePrograms[0].description}}</text>
						<view class="video-tags">
							<text 
								class="tag elderly-text" 
								v-for="tag in exercisePrograms[0].tags" 
								:key="tag"
							>{{tag}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 运动分类 -->
			<view class="categories-section">
				<text class="section-title elderly-text-large">运动分类</text>
				<scroll-view class="categories-scroll" scroll-x>
					<view class="categories-list">
						<view 
							class="category-item interactive" 
							v-for="category in exerciseCategories" 
							:key="category.id"
							:class="{ active: selectedCategory === category.id }"
							@tap="selectCategory(category.id)"
						>
							<view class="category-icon" :style="{ background: category.gradient }">
								<text class="icon">{{category.icon}}</text>
							</view>
							<text class="category-name elderly-text">{{category.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 运动课程列表 -->
			<view class="courses-section">
				<text class="section-title elderly-text-large">运动课程</text>
				<view class="courses-grid">
					<view 
						class="course-card interactive slide-up" 
						v-for="(course, index) in filteredCourses" 
						:key="course.id"
						:style="{ animationDelay: (index * 0.1) + 's' }"
						@tap="playVideo(course)"
					>
						<view class="course-thumbnail">
							<image class="thumbnail-image" :src="course.thumbnail" />
							<view class="play-overlay">
								<text class="play-icon">▶️</text>
							</view>
							<view class="duration-badge">
								<text class="duration-text elderly-text">{{course.duration}}</text>
							</view>
							<view class="difficulty-badge" :class="course.difficulty">
								<text class="difficulty-text elderly-text">{{course.difficultyText}}</text>
							</view>
						</view>
						<view class="course-info">
							<text class="course-title elderly-text">{{course.title}}</text>
							<text class="course-desc elderly-text">{{course.description}}</text>
							<view class="course-meta">
								<view class="meta-item">
									<text class="meta-icon">👥</text>
									<text class="meta-text elderly-text">{{course.participants}}人学习</text>
								</view>
								<view class="meta-item">
									<text class="meta-icon">⭐</text>
									<text class="meta-text elderly-text">{{course.rating}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的运动记录 -->
			<view class="my-records-section">
				<text class="section-title elderly-text-large">我的运动记录</text>
				<view class="records-card">
					<view class="record-stats">
						<view class="stat-item">
							<text class="stat-number elderly-text-large">{{myRecords.totalTime}}</text>
							<text class="stat-label elderly-text">总运动时长</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item">
							<text class="stat-number elderly-text-large">{{myRecords.totalDays}}</text>
							<text class="stat-label elderly-text">运动天数</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item">
							<text class="stat-number elderly-text-large">{{myRecords.continuousDays}}</text>
							<text class="stat-label elderly-text">连续天数</text>
						</view>
					</view>
					<view class="recent-records">
						<text class="records-title elderly-text">最近运动</text>
						<view class="record-list">
							<view 
								class="record-item" 
								v-for="record in myRecords.recent" 
								:key="record.id"
							>
								<text class="record-course elderly-text">{{record.courseName}}</text>
								<text class="record-time elderly-text">{{record.duration}}</text>
								<text class="record-date elderly-text">{{record.date}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 视频播放弹窗 -->
		<view class="video-modal" v-if="showVideoModal">
			<view class="modal-content">
				<view class="video-header">
					<text class="video-title elderly-text-large">{{currentVideo.title}}</text>
					<view class="close-btn elderly-pressable" @tap="closeVideoModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="video-container">
					<video 
						class="video-player" 
						:src="currentVideo.videoUrl" 
						controls 
						:poster="currentVideo.thumbnail"
						@play="onVideoPlay"
						@pause="onVideoPause"
						@ended="onVideoEnd"
					></video>
				</view>
				<view class="video-info">
					<text class="video-desc elderly-text">{{currentVideo.description}}</text>
					<view class="video-actions">
						<button class="action-btn elderly-button" @tap="addToFavorites">收藏</button>
						<button class="action-btn elderly-button" @tap="shareVideo">分享</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
import { hapticLight, playSfx } from '@/utils/interaction.js'

export default {
	data() {
		return {
			refreshing: false,
			selectedCategory: 'all',
			showVideoModal: false,
			currentVideo: {},
			
			// 运动分类
			exerciseCategories: [
				{ id: 'all', name: '全部', icon: '🏃', gradient: 'linear-gradient(135deg, #FF7E29, #FFD166)' },
				{ id: 'tai chi', name: '太极拳', icon: '🥋', gradient: 'linear-gradient(135deg, #4A90E2, #6DD400)' },
				{ id: 'qigong', name: '气功', icon: '🧘', gradient: 'linear-gradient(135deg, #6DD400, #4A90E2)' },
				{ id: 'dance', name: '广场舞', icon: '💃', gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)' },
				{ id: 'walking', name: '健步走', icon: '🚶', gradient: 'linear-gradient(135deg, #9D4EDD, #4A90E2)' },
				{ id: 'yoga', name: '瑜伽', icon: '🧘‍♀️', gradient: 'linear-gradient(135deg, #FFD166, #FF7E29)' }
			],
			
			// 运动课程
			exercisePrograms: [
				{
					id: 1,
					title: '24式太极拳完整教学',
					description: '适合初学者的太极拳基础课程，动作简单易学',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video1.mp4',
					duration: '45分钟',
					category: 'tai chi',
					difficulty: 'easy',
					difficultyText: '初级',
					participants: 1256,
					rating: 4.8,
					tags: ['太极拳', '基础', '养生']
				},
				{
					id: 2,
					title: '八段锦养生功法',
					description: '传统气功八段锦，强身健体，延年益寿',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video2.mp4',
					duration: '30分钟',
					category: 'qigong',
					difficulty: 'easy',
					difficultyText: '初级',
					participants: 892,
					rating: 4.9,
					tags: ['八段锦', '气功', '养生']
				},
				{
					id: 3,
					title: '广场舞基础教学',
					description: '简单易学的广场舞动作，适合老年朋友',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video3.mp4',
					duration: '25分钟',
					category: 'dance',
					difficulty: 'easy',
					difficultyText: '初级',
					participants: 2156,
					rating: 4.7,
					tags: ['广场舞', '舞蹈', '娱乐']
				},
				{
					id: 4,
					title: '健步走技巧指导',
					description: '正确的健步走姿势和呼吸方法',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video4.mp4',
					duration: '20分钟',
					category: 'walking',
					difficulty: 'easy',
					difficultyText: '初级',
					participants: 1567,
					rating: 4.6,
					tags: ['健步走', '有氧', '简单']
				},
				{
					id: 5,
					title: '老年瑜伽入门',
					description: '专为老年人设计的瑜伽动作，柔韧身体',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video5.mp4',
					duration: '35分钟',
					category: 'yoga',
					difficulty: 'medium',
					difficultyText: '中级',
					participants: 634,
					rating: 4.5,
					tags: ['瑜伽', '柔韧', '平衡']
				},
				{
					id: 6,
					title: '太极剑基础套路',
					description: '太极剑的基本动作和套路练习',
					thumbnail: 'https://via.placeholder.com/400x300',
					videoUrl: 'https://example.com/video6.mp4',
					duration: '40分钟',
					category: 'tai chi',
					difficulty: 'medium',
					difficultyText: '中级',
					participants: 423,
					rating: 4.8,
					tags: ['太极剑', '器械', '进阶']
				}
			],
			
			// 我的运动记录
			myRecords: {
				totalTime: '12小时30分',
				totalDays: 28,
				continuousDays: 7,
				recent: [
					{ id: 1, courseName: '24式太极拳', duration: '45分钟', date: '今天' },
					{ id: 2, courseName: '八段锦', duration: '30分钟', date: '昨天' },
					{ id: 3, courseName: '广场舞', duration: '25分钟', date: '前天' }
				]
			}
		}
	},
	
	computed: {
		filteredCourses() {
			if (this.selectedCategory === 'all') {
				return this.exercisePrograms
			}
			return this.exercisePrograms.filter(course => course.category === this.selectedCategory)
		}
	},
	
	onLoad() {
		this.loadExerciseData()
	},
	
	methods: {
		// 加载运动数据
		async loadExerciseData() {
			// 模拟加载数据
			console.log('加载运动指导数据')
		},
		
		// 下拉刷新
		async handleRefresh() {
			this.refreshing = true
			hapticLight()
			await this.loadExerciseData()
			this.refreshing = false
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		},
		
		// 筛选
		handleFilter() {
			hapticLight()
			uni.showActionSheet({
				itemList: ['全部', '初级', '中级', '高级'],
				success: (res) => {
					const difficulties = ['all', 'easy', 'medium', 'hard']
					// 这里可以实现难度筛选
					console.log('选择难度:', difficulties[res.tapIndex])
				}
			})
		},
		
		// 选择分类
		selectCategory(categoryId) {
			hapticLight()
			this.selectedCategory = categoryId
		},
		
		// 播放视频
		playVideo(course) {
			hapticLight()
			this.currentVideo = course
			this.showVideoModal = true
		},
		
		// 关闭视频弹窗
		closeVideoModal() {
			this.showVideoModal = false
			this.currentVideo = {}
		},
		
		// 视频播放事件
		onVideoPlay() {
			console.log('视频开始播放')
		},
		
		onVideoPause() {
			console.log('视频暂停')
		},
		
		onVideoEnd() {
			console.log('视频播放结束')
			// 记录运动完成
			this.recordExercise()
		},
		
		// 记录运动
		recordExercise() {
			const newRecord = {
				id: Date.now(),
				courseName: this.currentVideo.title,
				duration: this.currentVideo.duration,
				date: '今天'
			}
			
			this.myRecords.recent.unshift(newRecord)
			if (this.myRecords.recent.length > 5) {
				this.myRecords.recent.pop()
			}
			
			uni.showToast({
				title: '运动记录已保存',
				icon: 'success'
			})
		},
		
		// 添加到收藏
		addToFavorites() {
			hapticLight()
			uni.showToast({
				title: '已添加到收藏',
				icon: 'success'
			})
		},
		
		// 分享视频
		shareVideo() {
			hapticLight()
			uni.showActionSheet({
				itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
				success: (res) => {
					const actions = ['朋友', '朋友圈', '复制链接']
					uni.showToast({
						title: `已${actions[res.tapIndex]}`,
						icon: 'success'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	background: $theme-bg;
}

/* 顶部导航栏 */
.topbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base $elderly-spacing-lg;
	background: $theme-card;
	backdrop-filter: blur(20rpx);
	border-bottom: 2rpx solid $elderly-border;
	z-index: 100;
	box-shadow: $elderly-shadow-sm;
}

.title {
	font-size: $elderly-font-xl;
	font-weight: 700;
	color: $elderly-text-primary;
	letter-spacing: 2rpx;
}

.filter-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.filter-btn:hover {
	background: $grad-sunrise;
	transform: scale(1.1);
}

.filter-icon {
	font-size: $elderly-font-lg;
}

/* 主要内容区域 */
.main-content {
	height: calc(100vh - 200rpx);
	padding-bottom: 120rpx;
}

/* 今日推荐 */
.today-recommendation {
	margin: $elderly-spacing-base;
}

.recommendation-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-base;
}

.recommendation-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	overflow: hidden;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.recommendation-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.video-thumbnail {
	position: relative;
	width: 100%;
	height: 300rpx;
}

.thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon {
	font-size: $elderly-font-xxl;
	color: #FFFFFF;
}

.duration-badge {
	position: absolute;
	top: $elderly-spacing-sm;
	right: $elderly-spacing-sm;
	background: rgba(0, 0, 0, 0.7);
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.duration-text {
	color: #FFFFFF;
	font-size: $elderly-font-xs;
}

.video-info {
	padding: $elderly-spacing-lg;
}

.video-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-xs;
}

.video-desc {
	color: $elderly-text-secondary;
	line-height: 1.6;
	margin-bottom: $elderly-spacing-sm;
}

.video-tags {
	display: flex;
	gap: $elderly-spacing-xs;
	flex-wrap: wrap;
}

.tag {
	background: $theme-warm-gray;
	color: $elderly-text-secondary;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: $elderly-font-xs;
}

/* 运动分类 */
.categories-section {
	margin: $elderly-spacing-base;
}

.section-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-base;
}

.categories-scroll {
	white-space: nowrap;
}

.categories-list {
	display: flex;
	gap: $elderly-spacing-sm;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
	border: 2rpx solid transparent;
	min-width: 120rpx;
}

.category-item.active {
	background: $grad-sunrise;
	border-color: $theme-orange;
}

.category-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $elderly-spacing-xs;
}

.icon {
	font-size: $elderly-font-lg;
}

.category-name {
	font-size: $elderly-font-sm;
	font-weight: 600;
	text-align: center;
}

/* 运动课程 */
.courses-section {
	margin: $elderly-spacing-base;
}

.courses-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $elderly-spacing-base;
}

.course-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	overflow: hidden;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.course-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.course-thumbnail {
	position: relative;
	width: 100%;
	height: 200rpx;
}

.play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.difficulty-badge {
	position: absolute;
	top: $elderly-spacing-xs;
	left: $elderly-spacing-xs;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.difficulty-badge.easy {
	background: $theme-green;
}

.difficulty-badge.medium {
	background: $theme-orange;
}

.difficulty-badge.hard {
	background: $theme-coral;
}

.difficulty-text {
	color: #FFFFFF;
	font-size: $elderly-font-xs;
	font-weight: 600;
}

.course-info {
	padding: $elderly-spacing-base;
}

.course-title {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.course-desc {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
	line-height: 1.4;
	margin-bottom: $elderly-spacing-xs;
}

.course-meta {
	display: flex;
	justify-content: space-between;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 4rpx;
}

.meta-icon {
	font-size: $elderly-font-xs;
}

.meta-text {
	font-size: $elderly-font-xs;
	color: $elderly-text-secondary;
}

/* 我的运动记录 */
.my-records-section {
	margin: $elderly-spacing-base;
}

.records-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
}

.record-stats {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-bottom: $elderly-spacing-lg;
}

.stat-item {
	text-align: center;
}

.stat-number {
	color: $theme-orange;
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
	margin-top: 4rpx;
}

.stat-divider {
	width: 2rpx;
	height: 60rpx;
	background: $elderly-border;
}

.records-title {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: $elderly-spacing-sm;
}

.record-list {
	display: flex;
	flex-direction: column;
	gap: $elderly-spacing-xs;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $elderly-spacing-sm;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
}

.record-course {
	color: $elderly-text-primary;
	font-weight: 600;
}

.record-time {
	color: $theme-orange;
	font-weight: 600;
}

.record-date {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

/* 视频播放弹窗 */
.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	width: 90%;
	max-width: 800rpx;
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	overflow: hidden;
}

.video-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-lg;
	border-bottom: 2rpx solid $elderly-border;
}

.video-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	font-size: $elderly-font-lg;
	color: $elderly-text-secondary;
}

.video-container {
	width: 100%;
	height: 400rpx;
}

.video-player {
	width: 100%;
	height: 100%;
}

.video-info {
	padding: $elderly-spacing-lg;
}

.video-desc {
	color: $elderly-text-primary;
	line-height: 1.6;
	margin-bottom: $elderly-spacing-base;
}

.video-actions {
	display: flex;
	gap: $elderly-spacing-base;
}

.action-btn {
	flex: 1;
	background: $grad-sunrise;
	color: #FFFFFF;
	border: none;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-base;
	font-size: $elderly-font-base;
	font-weight: 600;
}

/* 安全区域适配 */
.safe-area-top {
	padding-top: env(safe-area-inset-top);
}
</style>

